<template>
  <div class="wrapper">
    <ul class="list">
      <li v-for="route in links" :key="route.path">
        <router-link :to="route.path">
          <span>{{ route.name }}</span>
          <RiArrowRightSLine />
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import routes from '@/routes'
import { computed } from 'vue'
import RiArrowRightSLine from '~icons/ri/arrow-right-s-line'

export default {
  name: 'IndexPage',
  components: {
    RiArrowRightSLine,
  },
  setup() {
    const links = computed(() => {
      return routes.filter((route) => {
        return route.path !== '/'
      })
    })
    return {
      links,
    }
  },
}
</script>

<style scoped lang="scss">
.wrapper {
  width: 600px;
  margin: 0 auto;
  padding-top: 40px;
}

.list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  flex-direction: column;
  border-top: 1px solid #ccc;

  li {
    border-bottom: 1px solid #ccc;
    height: 40px;
    line-height: 39px;
    text-align: start;
    box-sizing: border-box;
    padding: 0 0.5em;

    &:hover {
      background-color: rgba($color: green, $alpha: 0.05);
    }

    a {
      text-decoration: none;
      color: black;
      display: flex;
      align-items: center;
      justify-content: space-between;

      svg {
        color: gray;
        font-size: 18px;
      }
    }
  }
}
</style>
